<template>
    <div class="out">
        <div class="box">
            <n-grid :x-gap="10" :y-gap="5" :cols="1">
                <n-grid-item>
                    <n-carousel :offset="1">
                        <img
                        class="carousel-img"
                        :src="'https://omsv2-static.fnji.com/'+route.query.picLeft"
                        >
                        <img
                        class="carousel-img"
                        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
                        >
                        <img
                        class="carousel-img"
                        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
                        >
                        <img
                        class="carousel-img"
                        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
                        >
                    </n-carousel>
                </n-grid-item>
                <n-grid-item>
                    <n-input v-model:value="name" placeholder="input" size="medium"/>
                </n-grid-item>
                <n-grid-item>
                    <n-select v-model:value="fnjiType" size="medium" :options="options" clearable />
                </n-grid-item>
                <n-grid-item>
                    <n-button type="primary" size="medium" @click="handelupdate">确认修改</n-button>
                </n-grid-item>
            </n-grid>
        </div>
    </div>
</template>

<script setup>

import { NCarousel } from 'naive-ui';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { productUpdateApi } from '../../api/product';

const route = useRoute();
const name = ref(route.query.name);
const fnjiType = ref(route.query.fnjiType);
const options = [
 {
    label: "家具",
    value: "1",
 },
 {
    label: "家居",
    value: "2",
 },
]
const handelupdate = async () => {
  let res = await productUpdateApi(
    route.query._id,
    {
        'name':name.value,
        'fnjiType':fnjiType.value
    }
  )
}
</script>

<style lang="scss" scoped>
.carousel-img {
  width: 100%;
//   height: 240px;
  object-fit: cover;
}
.box{
  height: 400px;
  width: 400px;
}
.out{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>